<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>滑动条 Slider--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<script type="text/javascript">
$(function(){
	    $("ul.tab a").click(function() {
        var i = $("ul.tab a").index(this);
        $(this).parent().find("a").removeClass("current");
        $(this).addClass("current");
        $(".subtab").hide().eq(i).show();
        return false;
		});
	});
</script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/form/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>滑动条 Slider</h1>
                <ul class="tab">
                    <a href="#" class="current">综述</a>
                    <a href="#">选项</a>
                    <a href="#">方法</a>
                    <a href="#">事件</a>
                </ul><br />
                
                
	<div class="subtab">
				<div class="desc">
                <div>
                  <p>给标准的input输入框的设置type="range"属性，可以使之成为滑动条组件。输入框的<strong>value</strong>用来设置滑竿的起始位置，(起始的位置是根据总大小和value值计算出的)，<strong>min</strong>和<strong>max</strong>属性的值是用来配置滑动条的数值范围。如果想指定滑动条的步进增量，则可以添加<strong>step</strong>属性.Jquery Mobile会解析这些属性来配置滑动条。</p>
                  <p>&nbsp;</p>
                  <p>当你滑动滑动条时，input会随之更新数值，反之亦然，使你能够很简单的在表单里提交数值。</p>
                  <p>&nbsp;</p>
                  <p>注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性.</p>
                  <p>&nbsp;</p>
                  <p>jquery mobile框架会自动初始化把页面上有<strong>type="  range  "</strong>属性的输入框，都渲染成为滑动条，而不需要<strong>data-role</strong>属性。如果要阻止将  input   输入框渲染为滑动条，可以给 input  输入框添加<strong>data-role="none"</strong>的属性。然后放在<strong>data-role="fieldcontain"</strong>的容器中。</p>
                </div> 
</div>
                
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre><strong>&lt;div data-role=&quot;fieldcontain&quot;&gt;<br />	&lt;label for=&quot;slider&quot;&gt;Input slider:&lt;/label&gt;<br /> 	&lt;input type=&quot;range&quot; name=&quot;slider&quot; id=&quot;slider&quot; value=&quot;0&quot; min=&quot;0&quot; max=&quot;100&quot;  /&gt;<br />&lt;/div&gt;</strong></pre>
</div>
 	<p class="indent"><strong>滑动条 Slider</strong></p>
	<img src="../../images/form element/slider.png" tppabs="http://www.jqmapi.com/images/form%20element/slider.png">
	<h1>步进增量 Step increment</h1>
    <div class="desc">
                <div>设置input的<strong>step</strong>属性，可以强制input的步进增量。默认情况下<strong>step</strong>为1</div>               
</div>
 	<p class="indent"><strong>步进增量 Step increment</strong></p>
    				<div class="code">
				  <pre>&lt;label for=&quot;slider-step&quot;&gt;Input slider:&lt;/label&gt;<br>&lt;input type=&quot;range&quot; name=&quot;slider-step&quot; id=&quot;slider-step&quot; value=&quot;150&quot; min=&quot;0&quot; max=&quot;500&quot; step=&quot;50&quot; /&gt;</pre>
</div>
    <div class="desc">
                <div>这样可以滑动条设置步进增量为50.如果增量的值不在滑动条中的范围，则步进增量的值会被设为无效</div>               
</div>

<hr /> 
<h1>划过高亮 Fill highlight</h1>
				<div class="desc">
                <div>如果要让滑动条中划过的部分高亮，给滑动条添加data-highlight="true" 属性。高亮的颜色使用主题样式</div> 
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>&lt;label for=&quot;slider-fill&quot;&gt;Input slider:&lt;/label&gt;<br>&lt;input type=&quot;range&quot; name=&quot;slider-fill&quot; id=&quot;slider-fill&quot; value=&quot;60&quot; min=&quot;0&quot; max=&quot;100&quot; data-highlight=&quot;true&quot; /&gt;</pre>
</div>
	<img src="../../images/form element/slider3.jpg" tppabs="http://www.jqmapi.com/images/form%20element/slider3.jpg">
</div>
<h1>mini版本 Mini version</h1>
				<div class="desc">
                <div>给滑动条添加data-mini="true"属性，可以构建一个迷你版本的滑动条</div> 
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>&lt;label for=&quot;slider-mini&quot;&gt;Input slider:&lt;/label&gt;
		&lt;input type=&quot;range&quot; name=&quot;slider-mini&quot; id=&quot;slider-mini&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot;<br /> data-highlight=&quot;true&quot; <strong>data-mini=&quot;true&quot;</strong> /&gt;</pre>
                  </div>
</div>
	<img src="../../images/form element/slider4.jpg" tppabs="http://www.jqmapi.com/images/form%20element/slider4.jpg">
<h1>调用滑动条组件  Calling the slider plugin</h1>
				<div class="desc">
                <div>jquery mobile框架会自动初始化把页面上有  type="range" 属性的输入框，都渲染成为jquqey mobile的滑动条，而不需要data-role属性。但是，如果需要的话，你可以调用  slider    方法把一个input 元素转为滑动条。</div> 
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('input').slider();</pre>
                </div>
<h1>Theming the slider</h1>
<div class="desc">
<div>给搜索输入框添加<strong>data-theme </strong>属性可以设置滑动条的主题样式。</div>
</div>
</div>
    </div> 
    
    
    <div class="subtab">
<div class="desc">
<h2>下面的选项适用于<strong>所有的滑动条</strong></h2>
</div>
	<h1 class="method">
	  <div class="wg">disabled</div>
  		<div class="info">布尔值</div></h1>
	<p class="indent"><strong>默认：false</strong></p>
    
<div class="code"> 
    <p>设为true时会把滑动条禁用</p>
    <p><strong>$('.selector').slider({ disabled: true });</strong></p>
  </div>

	<h1 class="method"><div class="wg">highlight</div>
  		<div class="info">布尔值</div></h1>
	<p class="indent"><strong>默认：false</strong></p> 
<div class="code"> 
    <p>设为true时会把滑动条划过的部分设为高亮</p>
    <pre>$('.selector').slider(<strong>{ highlight: true }</strong>);</pre>
</div> 
	<h1 class="method"><div class="wg">initSelector</div>
  		<div class="info">css选择符</div></h1>
	<p class="indent"><strong>默认： "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</strong></p> 
<div class="code"> 
    <p>此选项用来定义被被初始化为表单按钮的选择符（通过元素类型，数据规则等）</p>
    <p>要改变被初始化的元素，需要给mobileinit event事件绑定这个选项</p> 
    <p>$( document ).bind( "mobileinit", function(){</p>
    <p>&nbsp;&nbsp;&nbsp;<strong> $.mobile.slider.prototype.options.initSelector = ".myslider";</strong></p>
    <p>});</p>
  </div> 
	<h1 class="method"><div class="wg">mini</div>
  		<div class="info">布尔值</div></h1>
	<p class="indent"><strong>默认：false</strong></p> 
<div class="code"> 
    <p>设为true会使滑动条成为一个mini的版本，也可以通过给滑动条添加 data-mini="true"来设置<br>
      <br>
    </p>
    <pre>$('.selector').slider({ mini: true });</pre>
</div> 
	<h1 class="method"><div class="wg">theme</div>
	  <div class="info">字符串</div></h1>
	<p class="indent"><strong>默认：无，继承父元素</strong></p>
<div class="code"> 
    <p>给滑动条设置主题样式。接受从A-Z的主题样式，默认情况下继承父容器的主题样式。也可以通过 data-theme="a"的属性来设置</p>
    <p>$( ".selector" ).dialog(<strong>{ overlayTheme: "e" }</strong>);</p>
  </div> 
  </div> 
  
  <div class="subtab">
	  <div class="desc">
		<div>滑动条拥有如下方法：</div>
	<h1 class="method"><div class="wg">enable</div>
  		<div class="info">使一个滑动条可用</div>
	</h1>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').slider('enable');</pre>
</div>
	<h1 class="method"><div class="wg">disable</div>
  		<div class="info">使一个滑动条不可用</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$('.selector').slider('disable');</pre>
</div>
	<h1 class="method"><div class="wg">refresh</div>
  		<div class="info">刷新一个滑动条</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
		<p>如果你通过js手动修改了一个滑动条，必须使用refresh方法刷新滑动条</p>
				  <pre>$('.selector').slider('disable');</pre>
</div>
</div>
    

 <div class="subtab">
	  <div class="desc">
                <div>可以给input元素直接绑定事件，可以使用jQuery Mobile的虚拟事件，或者绑定JavaScript的标准事件，例如change, focus, blur等。</div>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$( ".selector" ).bind( "change", function(event, ui) {
  ...
});</pre>
</div>
	<h1 class="method"><div class="wg">create</div>
  		<div class="info">当slider被创建时触发</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$( ".selector" ).textinput({
  <strong> create: function(event, ui) { ... }</strong>
});	</pre>
</div>
	<h1 class="method"><div class="wg">slidestart</div>
  		<div class="info">当slider的交互开始时触发，包括点击和拖动</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$( ".selector" ).on( 'slidestart', function( event ) { ... });</pre>
</div>
	<h1 class="method"><div class="wg">slidestop</div>
  		<div class="info">当slider的交互结束时触发，包括点击和拖动</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
      	  <div class="code">
				  <pre>$( ".selector" ).on( 'slidestop', function( event ) { ... });</pre>
</div>
</div>
 <hr /> 
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



